import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, ScrollView, TouchableOpacity} from 'react-native';

import utils from '../../../common/utils';

import Header from '../../../components/header';

export default class extends PureComponent {
    render() {
        const {itemInfo, itemInfo: {title, content = '', item_list = []}, getCouponUrl} = this.props;
        let currentItem = null;
        if (item_list && item_list[0]) {
            currentItem = item_list[0];
        }
        let arr = content.match(/[\|\|p|\|\|img](.*)[p\|\||\|\|img]/g);
        let list = arr.map((item, idx) => {
            if (item.includes('||p')) {
                return <Text key={idx} style={styles.text}>{getContent(item, '||p', 'p||')}</Text>
            }
            if (item.includes('||img')) {
                let uri = getContent(item, '||img', 'img||');
                uri = uri.replace('&amp;', '&');
                let width = parseInt(utils.getQuery('w', uri)) || 0,
                    height = parseInt(utils.getQuery('h', uri)) || 0;
                let winWidth = utils.getScreen().width - 20,
                    rate = width / winWidth;
                return <Image key={idx} source={{uri}} style={[styles.img, {width: winWidth, height: height / rate}]}/>
            }
            return null;
        });
        let date = itemInfo.created_at.substr(0, 10);
        let imgHeight = 450 / (750 / utils.getScreen().width);
        return (
            <View style={styles.container}>
                <Header title={title} wrapperStyle={{backgroundColor: 'rgba(255, 255, 255, 0)'}}/>
                <ScrollView>
                    <Image source={{uri: itemInfo.thumb}}
                           style={{width: '100%', height: imgHeight}}
                           resizeMode="contain"/>
                    <Text style={styles.title}>{itemInfo.title}</Text>
                    <Text style={styles.date}>{date}</Text>
                    {list}
                </ScrollView>
                {
                    currentItem && currentItem.coupon_value > 0 ?
                        <TouchableOpacity onPress={() => {
                            getCouponUrl(currentItem.num_iid);
                        }}>
                            <View style={styles.couponWrap}>
                                <Text style={styles.couponText}>立即抢{currentItem.coupon_value}元优惠券</Text>
                            </View>
                        </TouchableOpacity>
                        : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    title: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#1e1e1e',
        margin: 10
    },
    date: {
        fontSize: 11,
        color: '#959595',
        margin: 10,
        marginTop: 0
    },
    text: {
        fontSize: 13,
        color: '#141414',
        lineHeight: 20,
        margin: 10
    },
    img: {
        margin: 10
    },
    couponWrap: {
        height: 32,
        backgroundColor: '#f42f19',
        justifyContent: 'center',
        alignItems: 'center'
    },
    couponText: {
        color: '#fff',
        fontSize: 13
    }
});

function getContent(text = '', left = '', right = '') {
    return text.substring(text.indexOf(left) + left.length, text.indexOf(right));
}